<template>
  <div>
    <main>
      <div class="h430">
        <div class="analysis">
          <div class="title">成绩分析</div>
          <div class="h210">
            智能获取成绩报告<br />
            生成学习建议
          </div>
          <div class="ifPass">
            <div class="alink" @click="toRecord">考过，上传成绩单</div>
            <div class="alink" @click="toSurvey">未考过，前往问卷调查</div>
          </div>
        </div>
        <!-- 学习计划 -->
        <div class="plans">
          <div class="title">
            <span v-if="userBase.testTime" @click="testDate = !testDate" class="date-test"
              >考试日期：{{ userBase.testTime | formatTime }} (点击修改)</span
            >
            <span v-else @click="testDate = !testDate" class="date-test"
              >考试日期： (点击修改)</span
            >
            <span v-if="testDate">
              <el-date-picker
                v-model="value1"
                type="date"
                placeholder="选择考试日期"
                :picker-options="pickerOptions"
              >
              </el-date-picker>
              <span class="save_date" v-if="testDate" @click="saveTestDate"
                >保存</span
              >
            </span>
            <span class="today_plan">今日计划</span>
            <span v-if="userBase.testTime">距离考试还剩 {{ userBase.testTime | restTime }} 天</span>
            <span v-else>距离考试还剩 0 天</span>
          </div>
          <div class="topic">
            <ul>
              <li class="bd1">
                <span>题目类型</span>
                <span class="restnum">剩余数量</span>
              </li>
              <li v-for="(item, index) in studyPlan" :key="index">
                <span>{{ item.subjectTypeName }}</span>
                <span class="normal">
                  <span>{{ item.num - item.numUse >0?item.num - item.numUse:0}}</span
                  >/{{ item.num }}</span
                >
              </li>
            </ul>
            <div class="todo" @click="$router.push('cate')">去完成</div>
          </div>
        </div>
      </div>
    </main>
    <!-- 路由占位符 :上传成绩单或者问卷调查-->
    <router-view></router-view>
  </div>
</template>

<script>
import api from '@/config/api'
import { sendPost } from '@/utils/http'
export default {
  data () {
    return {
      studyPlan: [],
      record: 'record',
      userBase: {},
      testDate: false,
      pickerOptions: {
        disabledDate (time) {
          return time.getTime() < Date.now();
        },
      },
      value1: '',
      value2: '',

    }
  },
  created () {
    this.getStudyPlan()
    this.getUserBase()
  },
  methods: {
    toSurvey () {
      this.$router.push('survey')
      sessionStorage.setItem('mbFlag', 'false')
    },
    saveTestDate () {
      this.testDate = false
      var that = this
      if (this.value1 !== '') {
        let time = new Date(this.value1)
        var datetime = time.getFullYear() + '-' + ((time.getMonth() + 1)>9? (time.getMonth() + 1):('0'+(time.getMonth() + 1))) + '-' + (time.getDate()>9?time.getDate():'0'+time.getDate())
        console.log(datetime);
        this.value1=datetime
        sendPost(api.updateTestTime, { testTime: datetime }).then(res => {
          console.log(res);
          // that.userBase.testTime = that.value1
          this.$msg.success('考试日期修改成功！')
          that.getUserBase()
          console.log(that.userBase.testTime);
        })
      } else {
        return
      }
    },
    getUserBase () {
      sendPost(api.getUserBase, {}).then(res => {
        console.log(res.data);
        this.userBase = res.data
      })
    },
    getStudyPlan () {
      sendPost(api.getStudyPlan, {}).then(res => {
        // console.log(res);
        this.studyPlan = res.data
      })
    },
    toRecord () {
      // console.log(1);
      window.sessionStorage.setItem('activeIndex', 'record')
      this.$router.push('record')
      this.$router.go(0)
    }
  }
}
</script>

<style lang="less" scoped>
.date-test {
  cursor: pointer;
}
.save_date {
  color: #fff;
  margin-left: 0.375rem;
  cursor: pointer;
}
.h430 {
  height: 26.875rem;
  background-color: #f7f7f7 !important;
  .analysis {
    background-color: #fff;
    border-radius: 0.3125rem;
    height: 17rem;
    padding: 0 1.25rem;
    box-sizing: border-box;
    .title {
      height: 4rem;
      line-height: 4rem;
      font-weight: bold;
      border-bottom: 1px solid #eee;
      box-sizing: border-box;
      font-size: 1.25rem;
      color: #333;
    }
    .h210 {
      height: 8rem;
      text-align: center;
      font-size: 1.25rem;
      color: #999;
      padding-top: 3rem;
      box-sizing: border-box;
    }
    .ifPass {
      display: flex;
      justify-content: space-evenly;
      .alink {
        width: 16.25rem;
        height: 3rem;
        background-color: #ff5e4e;
        color: #fff;
        font-size: 1.5rem;
        line-height: 3rem;
        text-align: center;
        border: 1px solid #ff5e4e;
        box-sizing: border-box;
        border-radius: 0.1875rem;
        cursor: pointer;
      }
    }
  }
  .plans {
    margin-top: 1.25rem;
    height: 50rem;
    position: relative;
    .title {
      display: flex;
      height: 3.5rem;
      line-height: 3.5rem;
      border-radius: 0.3125rem;
      background-color: #13bfbf;
      justify-content: space-between;
      padding: 0 1.25rem;
      box-sizing: border-box;
      font-size: 1.125rem;
      color: #fff;
      .today_plan {
        font-size: 1.5rem;
        font-weight: bold;
      }
    }
    .topic {
      width: 56.875rem;
      // height: 67.5rem;
      background-color: #fff;
      padding: 1.5625rem 2.5rem;
      box-sizing: border-box;
      ul {
        display: flex;
        flex-wrap: wrap;
        .bd1 {
          // border: 1px solid #ff5e4e;
          border: 1px solid #13bfbf;
          color: #13bfbf;
        }
        li {
          display: flex;
          margin: 0.625rem 1.25rem;
          flex-direction: column;
          width: 9.6875rem;
          height: 9.1875rem;
          text-align: center;
          color: #999;
          font-size: 1.25rem;
          border-radius: 0.1875rem;
          padding-top: 1.5rem;
          box-sizing: border-box;
          cursor: pointer;
          span {
            font-size: 1.25rem;
          }
          .normal {
            font-size: 2rem;
            font-weight: bold;
            margin-top: 1.25rem;
            span {
              font-size: 2rem;
              color: #13bfbf;
            }
          }
        }
        .restnum {
          font-size: 1.5rem;
          // color: #ff5e4e;
          color: #13bfbf;
          font-weight: bold;
          margin-top: 1.25rem;
        }
      }
    }
  }
  .todo {
    width: 6.25rem;
    height: 2.5rem;
    border-radius: 5px;
    color: #fff;
    background-color: #ff5e4e;
    line-height: 2.5rem;
    font-size: 1.25rem;
    text-align: center;
    margin: auto;
    cursor: pointer;
    margin-bottom: 1.25rem;
    position: absolute;
    bottom: 10px;
    left: 50%;
    transform: translateX(-50%);
  }
}
</style>
